<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="app-container">
    <el-table
      border
      :data="plantDetails"
      style="width: 100%"
      @row-dblclick="handleDetail"
    >
      <el-table-column
        align="center"
        prop="created_at"
        label="时间"
      />
      <el-table-column
        align="center"
        prop="amount"
        label="总灌溉深度(mm)"
      >
        <template #default="scope">
          <el-table-column
            v-for="(item,index) in scope.row.cells"
            :key="index"
            align="center"
            prop="cells[index].amount"
            :label="item.name"
          >
            <template #default="cscope">
              {{ scope.row.cells[index].amount }}
            </template>
          </el-table-column>
          {{ scope.row.total }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100"
      >
        <template slot-scope="scope">
          <el-link type="primary" size="mini" @click="handleDetail(scope.row)">查看详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="h12" />
    <el-dialog
      title="决策详情"
      :visible.sync="dialogVisible"
      width="60%"
      :close="handleClose"
      fullscreen
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="分区及决策信息" name="first">
          <div style="width:100%;height:84vh">
            <l-map
              :zoom="zoom"
              :center="center"
            >
              <l-tile-layer v-for="(item,index) in urls" :key="index" :url="item" />
              <l-polygon
                v-for="(item,index) in plantDetail.cells"
                :key="item.id + index"
                :lat-lngs="item.latlngs"
                :color="item.color"
                :fill-opacity="getOpacity(item)"
                :name="item.name"
                @mouseover="mouseOver(item)"
                @mouseout="mouseOut(item)"
              >
                <l-tooltip :options="options">
                  <div style="display:flex;flex-direction:column;font-size:14px;">
                    <span style="display:inline-block;">{{ item.name }}</span>
                    <div class="h12" />
                    <span style="display:inline-block;">深度：{{ item.amount }}mm</span>
                  </div>
                </l-tooltip>
              </l-polygon>
            </l-map>
            <el-button type="primary" style="position:fixed;right:54px;bottom:60px;z-index:99999" @click="activeName='second'">查看灌溉计划</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="灌溉计划" name="second">
          <div style="padding:0 24px">
            <el-divider content-position="left"><b>喷灌机计划</b></el-divider>
            <el-descriptions border>
              <el-descriptions-item label="计划名称">喷灌计划20231115</el-descriptions-item>
              <el-descriptions-item label="开始时间">2023-11-15 11:00:00</el-descriptions-item>
              <el-descriptions-item label="行走方向">正向</el-descriptions-item>
              <el-descriptions-item label="初始速率">99%</el-descriptions-item>
              <el-descriptions-item label="终止角度">320</el-descriptions-item>
            </el-descriptions>
            <div class="h12" />
            <el-divider content-position="left"><b>喷头计划</b></el-divider>
            <el-table
              border
              :data="plantDetail.cells || []"
              style="width: 100%"
            >
              <el-table-column
                align="center"
                prop="name"
                label="分区"
              />
              <el-table-column
                align="center"
                prop="amount"
                label="灌溉深度(mm)"
              />
              <el-table-column
                align="center"
                prop="area"
                label="灌溉面积(m²)"
              />
              <el-table-column
                align="center"
                prop="amount_raw"
                label="灌溉量(m³)"
              />
              <el-table-column
                align="center"
                prop="speed"
                label="行走速率(%)"
              />
              <el-table-column
                align="center"
                prop="timetran"
                label="脉冲周期(s)"
              />
              <el-table-column
                align="center"
                prop="pwm"
                label="占空比(%)"
              />
            </el-table>
            <div class="h12" />
            <el-button type="primary" @click="handlePlan">执行计划</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAll } from '@/api/plantDetail'
import map from '@/config/map'
import * as turf from '@turf/turf'
export default {
  data() {
    return {
      activeName: 'first',
      zoom: 16,
      center: '',
      urls: map.mapTypes[map.initType],
      plantDetails: [],
      plantDetail: {},
      polygons: [],
      polygonsDialogVisible: true,
      dialogVisible: false,
      options: {
        permanent: true,
        interactive: false,
        fontSize: '16px',
        direction: 'bottom',
        className: 'anim-tooltip'
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'fields']),
    currentField() {
      const res = this.fields.filter((val) => {
        return +val.project_id === +this.project.id
      })
      return res[0] || {}
    }
  },
  created() {
    this.getAll()
    this.center = [this.project.lat, this.project.lng]
    this.zoom = this.project.maplevel
  },
  methods: {
    handleClose() {
      this.activeName = 'first'
      this.plantDetail = {}
    },
    handleDetail(row) {
      this.dialogVisible = true
      this.plantDetail = row
    },
    async getAll() {
      const { data } = await getAll({ field_id: this.currentField.id })
      this.plantDetails = data

      this.plantDetails.map((item) => {
        item.total = 0
        item.cells.map((val, key) => {
          val.latlngs = val.kml.split(';').map((item) => {
            const latlng = item.split(',')
            return [parseFloat(latlng[1]), parseFloat(latlng[0])]
          })
          val.polygon = val.kml.split(';').map((item) => {
            const latlng = item.split(',')
            return [parseFloat(latlng[0]), parseFloat(latlng[1])]
          })
          val.polygon[val.polygon.length] = val.polygon[0]
          val.color = 'green'
          val.opacity = 20
          val.timetran = 60
          val.speed = 100
          val.pwm = 80
          val.amount = item.data[key]['amount'].toFixed(2)
          val.area = turf.area(turf.polygon([
            val.polygon
          ])).toFixed(2)
          val.amount_raw = (val.amount * val.area / 1000).toFixed(2)
          // this.polygons.push(val)
          item.total += +val.amount
          return val
        })
        item.total = item.total.toFixed(2)
        return item
      })
    },
    getOpacity(item) {
      return (item.opacity || 60) / 100
    },
    mouseOver(item) {
      item.opacity = 60
    },
    mouseOut(item) {
      item.opacity = 20
    },
    handlePlan() {
      this.$confirm('确定执行该计划吗？', '操作确认', { type: 'warning' }).then((res) => {
        if (res === 'confirm') {
          this.$message.success('计划已下发')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
